<template>
  <div class="second-list">
    <x-header :left-options="{preventGoBack: true}" @on-click-back="$router.push('/forum/square')">{{$route.params.id}}<a slot="right"></a></x-header>
    <scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="padding-top:50px;min-height: 500px;" ref="my_scroller">
      <item-list @remove="handleRemove" :datalist="list" @focusman="handleFocusman" :hasLikeArr="[]" :hasAttenArr="[]"></item-list>
    </scroller>
    <actionsheet
      v-model="showConfirm"
      :menus="cacelList"
      show-cancel
      @on-click-menu="clickMenu">
    </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { Actionsheet, XHeader } from 'vux';
import { namespace } from 'vuex-class';
import { getUnixTime } from '../../js/utils'
import ItemList from '../common/Item';
const IndexStore = namespace('list');
const HomeStore = namespace('home');
@Component({
  components: { Actionsheet, ItemList, XHeader }
})
export default class SecondList extends Vue {
  @HomeStore.Action getUnWatchPost;
  @HomeStore.Action getWatchUser;
  @HomeStore.Action getLikePost;
  @IndexStore.Action getPostList;
  @IndexStore.State postList;
  currentItem = null
  showConfirm = false
  cacelList = {
  	0: '不再看到此条帖子',
  	1: '收藏',
    2: '举报'
    // 3: '不看此人'
  }
  list = []
  currentPage = 1
  pageSize = 10
  noDataText = '--我也是有底线的--'
  handleFocusman (item) {
    const params = {
      status: 0,
      user2Obj: item.creator
    }
    this.getWatchUser(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('关注成功', 'middle');
      }
    })
  }
  infinite () {
    this.initPostList()
    this.currentPage++
    setTimeout(() => {
      this.$refs.my_scroller.finishInfinite(true)
    }, 1000)
  }
  myTime = new Date()
  handleRemove (item) {
    this.currentItem = item
    this.id = item._id
    this.showConfirm = true
  }
  refresh () {
    this.myTime = new Date()
    setTimeout(() => {
      this.list = []
      this.currentPage = 1
      this.$refs.my_scroller.finishPullToRefresh()
    }, 1000)
  }
  clickMenu (key, value) {
    if (key === '2') {
      const { creator, _id } = this.currentItem
      const info = {
        _id,
        creator,
        type: 'post'
      }
      this.$router.push({
        path: `/report`,
        query: {
          info
        }
      })
    }
    if (key === '1') {
      const params = {
        postId: this.id,
        userId: this.userInfo._id
      }
      this.getSaveCollect(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('收藏成功', 'middle');
        }
      })
    }
    if (key === '0') {
      const params = {
        postId: this.id
      }
      this.getUnWatchPost(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('已不再看到此帖子', 'middle');
        }
      })
    }
  }
  initPostList () {
    const params = {
      current: this.currentPage,
      createTime: getUnixTime(this.myTime),
      pageSize: this.pageSize,
      secCategory: this.$route.params.id,
      type: Number(localStorage.getItem('type')),
      userId: this.userInfo && this.userInfo._id
    }
    this.getPostList(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.postList
        this.list = this.list.concat(list)
      }
    })
  }
}
</script>
<style lang="less">
  .item-list-box:before {
    content: initial !important;
  }
  .second-list {
    .img-list {
      display: flex;
      width: 95%;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 10px;
      img{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 200px;
        min-height: 70px;
        min-width: 70px;
      }
    }
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
  .img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 200px;
      min-height: 70px;
      min-width: 70px;
    }
    .img-box {
    margin-bottom: 5px;
    margin-right: 5px;
  }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .changeImg {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .item-list-box {
    // font-size: 12px;
    background: #ffffff;
    margin: 0 auto;
    width: 95%;
    border-radius: 10px;
    margin-bottom: 5px;
    padding: 10px 20px;
    .weui-cell__ft {
      text-align: left;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      span {
        margin-left: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #C4C4C4;
        &.active{
        	color:#EFA79B;
        }
      }
    }
    .con {
      color:#5F5F5F;
      line-height: 24px;
      padding-bottom: 8px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      position: relative;
      top:-2px;
    }
    .img {
      width: 100%;
      height: 120px;
    }
    .type {
      color: #666666;
    }
    .focusman {
      height: 18px;
      // border: 1px solid #E5E5E5;
      padding: 0px 8px;
      color: #666666;
      // font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .top {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .left {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .attention{
      	position: absolute;
      	bottom:0;
      	right:20%;
      	color: #D36566;
        border-radius:50%;
      }
    }
    .right {
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .right-1 {
      display: flex;
      flex-direction: column;
    }
    .right-2 {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bot {
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
    }
    .main{
	    padding-left: 20%;
    }

  }
</style>


